@import "../../resources/iconfont/iconfont.wxss";
@import '../../resources/css/network-img.wxss';

.gift-popup {
  width: 100%;
  .title {
    background-size: 100% 100%; 
    width: 100%;
    height: 288rpx;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    .title-text {
      width: 386rpx;
      margin:90rpx auto;
      height:145rpx;
    }
  }
  .gifts-bg {
    height: 641rpx;
    margin:-90rpx auto 0;
    width: 96%;
  }
  .m-t-70 {
    margin: -70rpx auto 0;
  }
  .gifts-content {
    background-size: 100% 100%;
    color: #fff;
    position: relative;
    z-index: 0;
    font-size: 28rpx;
    .gift-con {
      position: absolute;
      top: 110rpx;
      left: 50%;
      transform: translate(-50%);
      text-align: center;
      .gift-invalid {
        margin-top:72rpx;
        .emoji {
          width: 150rpx;
          height: 150rpx;
        }
        .coupon-remark {
          color: #fff;
          font-size: 30rpx;
          margin-top:180rpx;
          width: 450rpx;
          line-height: 40rpx;
          .mycard-btn {
            color: #FFD32C;
            text-decoration: underline;
          }
        }
      }
      .card {
        background-size: 100% 100%;
        width:460rpx;
        height:162rpx;
        margin: 26rpx auto 38rpx;
        position: relative;
        display: flex;
        align-items:center;
        .card-price {
          width: 130rpx;
          height: 90rpx;
          font-size: 20rpx;
          color: #FF2424;
          text-align: center;
          line-height: 90rpx;
          // display: flex;
          // // margin-left: 16rpx;
          // align-items: center;
          .card-price-num {
            font-size: 44rpx;
          }
        }
        .card-img {
          width: 80rpx;
          height: 70rpx;
          margin-left: 26rpx;
          // margin-bottom: 13rpx;
          display: inline-block;
        }
        .card-content {
          position: absolute;
          display: inline-block;
          left: 160rpx;
          text-align: left;
          padding: 30rpx 30rpx 30rpx 0;
          // vertical-align: middle;
          .card-title {            
            font-size: 24rpx;
            // height: 76rpx;
            // 块元素中文字显示行数
            display:-webkit-box;
            -webkit-line-clamp: 2; 
            line-clamp: 2;
            overflow : hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            .deduction-card-text {
              background: #5B6CFF;
            }
            .full-reduce-card-type {
              background: #FF8C1A;
            }
            .assemble-card-type {
              background: #FF5656;
            }
            .card-type {
              border-radius: 6rpx;
              padding: 2rpx 10rpx;
              display: inline-block;
              color: #fff;
            }
            .card-name {
              color: #333;
              font-weight: bold;
            }
          }
          .specification-amount {
            display: flex;
            justify-content: space-between;
            line-height: 44rpx;
            .goods-specification {
              font-size: 22rpx;
              color: #666666;
            }
            .goods-amount {
              font-size: 22rpx;
              color: #999;
            }
            .coupon-specification {
              font-size: 22rpx;
              color: #FF2424;
            }
          }
          .remark {
            color: #666;
          }
          .time {
            line-height: 26rpx;
            font-size: 22rpx;
            color: #999999;
          }
        }
      }
      .card-place {
        margin-top: 30rpx;
        .mycard-btn {
          color: #FFD32C;
          text-decoration: underline;
        }
      }
    }
    .now-use-btn {
      background-size: 100% 100%;
      width:470rpx;
      height:76rpx;
      line-height:76rpx;
      text-align:center;
      font-size:36rpx;
      color:#FF2424;
      position: absolute;
      bottom: 45rpx;
      left: 50%;
      transform: translate(-50%);
    }
    .m-t-76 {
      top: 76rpx;
    }
    .reward-con {
      top: 220rpx;
    }
  }
}
.coupon-recv-popup {
  .close-line {
    height:60rpx;
    width:1px;
    background:#fff;
    margin:0 auto;
  }
  .close-btn-box {
    border-radius: 50%;
    border: 1px solid #fff;
    width: 60rpx;
    height: 60rpx;
    line-height: 58rpx;
    margin: 0 auto;
    .iconfont {
      font-size:40rpx;
      color:#fff;
    }
  }
}